/**
 * General styling for AFCH
 */

/* Nice colors */

@sexyblack: #111111;
@gray: #979797;
@lightgray: #DDDDDD;
@white: #FFFFFF;
@green: #2ECC40;
@orange: #FF851B;
@yellow: #FFDC00;
@blue: #0074D9;
@red: #FF4136;

/* General styles */

.hidden {
	display: none !important;
}

.centered {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-smaller {
	font-size: 0.7em;
}

.link:hover {
	cursor: pointer;
	text-decoration: underline;
}

/* Button styling */

div.gradient-button, .gradient-button {
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	transition: box-shadow .1s ease-in-out;

	&:hover {
		text-decoration: none;
		background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
		box-shadow:0 1px rgba(0, 0, 0, .1), inset 0 -3px rgba(0, 0, 0, .2);
	}

	&:active {
		color: @sexyblack;
		background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
		box-shadow: 0 1px rgba(0, 0, 0, .2);
	}

	&.disabled {
		background-color: @lightgray;
		text-decoration: none;
		user-select: none;
		cursor: not-allowed;

		&:active, &:hover {
			background-image: none;
			box-shadow: none;
		}
	}
}

/* Form styling */
.afch, .afch-form {
	.afch-option {
		display: block;
		padding: 5px;
	}

	.afch-label {
		padding: 5px;
	}

	select .afch-input {
		vertical-align: baseline;
	}

	.afch-textfield {
		-webkit-appearance: none;
		border: 1px solid @lightgray;
		border-collapse: collapse;
		box-sizing: border-box;
		cursor: auto;
		display: inline-block;
		font-size: 14px;
		height: 30px;
		margin: 0px;
		padding-left: 5px;
		vertical-align: middle;
		width: 25%;
		min-width: 150px;

		&:focus {
			border: 1px solid @gray;
			outline: 0;
		}
	}

	.afch-textarea {
		height: 150px;
		width: 50%;
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
	}

	label, input {
		display: inline-block;
	}

	label {
		text-align: left;
		font-size: 0.8em;
	}

	label + input[type=text] {
		width: 30%;
		min-width: 250px;
	}

	input + input {
		float: right;
	}
}

.afch-preferences {
	label.afch-label {
		font-size: 1em;
	}

	div + div {
		border-top: 1px dashed gray;
		padding: 8px 0;
	}

	.details {
		padding-bottom: 10px;
	}
}
